<template>
    <div class="welcome-container">
      <div class="chat-box">
        <!-- 渲染多个问题 -->
        <!-- <div v-for="(q, index) in questions" :key="index" class="message">
          <strong>问题 {{ index + 1 }}:</strong> {{ q }}
        </div> -->
    
        <!-- Typing Indicator -->
        <div v-if="showTyping" class="typing-indicator">...</div>
    
        <!-- 聊天消息 -->
        <Transition name="fade">
          <div v-if="showFullQuestion" class="message user-message">
            {{ currentQuestion }}
          </div>
        </Transition>
    
        <!-- 答案输入 -->
        <div v-if="showInput" class="answer-input">
          <textarea
            v-model="userAnswer"
            placeholder="请写下你的思考..."
            rows="3"
          ></textarea>
          <button @click="submitAnswer">提交答案</button>
        </div>
      </div>
  
      <!-- 提交后的感谢信息 -->
      <Transition name="fade">
        <div v-if="showThankYou" class="thank-you">
          <h2>🎉 感谢你的分享！</h2>
          <p>让我们开始这段旅程吧</p>
        </div>
      </Transition>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const questions = ref([
    '你想成为怎样的一个人？',
    '你的梦想是什么？',
    '你如何看待失败？',
  ]);
  
  const currentQuestionIndex = ref(0);
  const currentQuestion = computed(() => questions.value[currentQuestionIndex.value]);
  const showTyping = ref(true);
  const showFullQuestion = ref(false);
  const showInput = ref(false);
  const userAnswer = ref('');
  const showThankYou = ref(false);
  
  const startAnimation = () => {
    setTimeout(() => {
      showTyping.value = false;
      showFullQuestion.value = true;
    }, 1500);
  
    setTimeout(() => {
      showInput.value = true;
    }, 2500);
  }
  
  const submitAnswer = async () => {
    if (!userAnswer.value.trim()) return;
  
    // 这里可以添加API调用
    // await axios.post('/api/save-answer', { answer: userAnswer.value });
  
    if (currentQuestionIndex.value < questions.value.length - 1) {
      currentQuestionIndex.value++;
      userAnswer.value = '';
      showTyping.value = true;
      showFullQuestion.value = false;
      showInput.value = false;
      startAnimation(); // 继续下一个问题
    } else {
      showThankYou.value = true;
    }
  }
  
  // 开始动画
  startAnimation();
  </script>
  
  <style scoped>
  .welcome-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }
  
  .chat-box {
    width: 500px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .message {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  
  .user-message {
    background-color: #f0f8ff;
    padding: 10px;
    border-radius: 8px;
  }
  
  .typing-indicator {
    color: #666;
    margin: 10px 0;
  }
  
  .answer-input {
    margin-top: auto; /* 将输入框固定在底部 */
  }
  
  textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: none;
    margin-bottom: 15px;
  }
  
  button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  }
  
  /* 动画效果 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  
  .thank-you {
    text-align: center;
    color: #333;
  }
  </style>